<template>
    <div class="container">
      <!-- 标题 -->
      <div class="toptitle">
        <div class="titletext">设备控制</div>
        <hr />
      </div>
  
      <!-- 地块选择区域 -->
      <div class="block-container">
        <div
          v-for="(block, index) in blocks"
          :key="index"
          class="block-item"
          :class="{ active: selectedBlock === block.name }"
          @click="selectBlock(block.name)"
        >
          {{ block.name }}
        </div>
      </div>
  
      <!-- 显示地块数据 -->
      <div class="block-data" >
        <p>当前选择: {{ selectedBlock }}</p>
        <p>地块数据: {{ blockData[selectedBlock] || "暂无数据" }}</p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  
  const blocks = [
    { name: "地块一" },
    { name: "地块二" },
    { name: "地块三" },
    { name: "地块四" },
  ];
  
  const blockData = {
    "地块一": "设备数: 5，运行良好",
    "地块二": "设备数: 3，存在故障",
    "地块三": "设备数: 7，待维护",
    "地块四": "设备数: 2，正常运行",
  };
  
  const selectedBlock = ref(""); // 选中的地块
  
  // 选择地块
  const selectBlock = (blockName) => {
    selectedBlock.value = blockName;
  };
  </script>
  
  <style lang="scss" scoped>
  @use "@/styles/themes.scss";
  
  .container {
    flex: 1;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 10px;
  
    .toptitle {
      margin-bottom: 10px;
  
      .titletext {
        border-left: 3px solid var(--primary-color);
        padding-left: 10px;
        font-size: 18px;
        font-weight: bold;
      }
  
      hr {
        background-color: rgb(194, 194, 194);
        height: 1px;
        border: none;
        margin: 5px 0;
      }
    }

    .block-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 10px;
  
      .block-item {
        padding: 8px 16px;
        cursor: pointer;
        color: var(--text-color);
        background-color: #f9f9f9;
        transition: background 0.3s;
        font-size: 18px;
  
        &.active {
          color: var(--primary-color);
          border-bottom: 2px solid var(--primary-color);
        }
  
        &:hover {
          color: var(--primary-color);
        }
      }
    }
  
    .block-data {
    width: 98%; 
    height: 100%;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fafafa;
    overflow: auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

        p {
            margin: 0;
            font-size: 17px;
            line-height: 1.8;
        }
    }

  }
  </style>
  